<template>
    <div class="right-panel">

        <div class="panel-item">
            <span class="head-sub-title">计划曲线</span>
            <div class="handle-btn">
                <el-button class="hy_btn"><img src="../../../assets/images/jhqxpz/icon_add.png" alt="">新增曲线</el-button>
                <el-button class="hy_btn is_primary" type="primary" @click="btnClick()">提交</el-button>
            </div>
        </div>


        <div class="panel-item-details">
            <div class="details-head">
                <span class="details-head-text">计划曲线名称</span>
                <img class="is_hover" src="../../../assets/images/jhqxpz/icon_edit.png" alt="">
            </div>

            <div class="details-body">
                <div class="details-info">
                    <div class="info-head">
                        <el-button class="hy_btn"><img src="../../../assets/images/jhqxpz/icon_add.png" alt="">新增时间段</el-button>
                    </div>
                    <div class="list-head">
                        <span class="list-head-item">起点</span>
                        <span class="list-head-item">终点</span>
                        <span class="list-head-item">值</span>
                        <span class="list-head-item" style="flex: 0.5">操作</span>
                    </div>
                    <div class="list-body">
                        <vue-scroll :ops="$root.scrollOpsY">
                            <div class="list-row" v-for="(item,index) in listTable">
                                <span class="list-td">
                                    <el-input class="item-value" v-model="value" placeholder=""></el-input>
                                </span>
                                    <span class="list-td">
                                    <el-input class="item-value" v-model="value" placeholder=""></el-input>
                                </span>
                                    <span class="list-td">
                                    <el-input class="item-value" v-model="value" placeholder=""></el-input>
                                </span>
                                <span class="list-td is_hover" style="flex: 0.5">删除</span>
                            </div>
                        </vue-scroll>
                    </div>
                </div>

                <div class="chart-box" ref="lineChart"></div>
            </div>
        </div>

        <ControlDialog ref="controlDialog"
                       :dialogTitle="dialogTitle"
                       :contentHide="true"
        ></ControlDialog>
    </div>
</template>

<script>
    import ControlDialog from '../../ControlDialog';

    export default {
        components: {
            ControlDialog,
        },
        data() {
            return {
                panelList: [
                    {},
                ],
                selectOptions: [],
                value: '',
                listTable: [
                    {}
                ],
                dialogTitle: '操作人员身份确认',
            }
        },
        methods: {
            chartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs.lineChart );

                var option = {
                    grid: {
                        top: '3%',
                        right: '3%',
                        bottom: '3%',
                        left: '3%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}:{c}',
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#243753',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            data: obj.names,
                        },
                    ],
                    yAxis: [
                        {
                            boundaryGap: false,
                            type: 'value',
                            axisLabel: {
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e3e3e3',
                                    type: 'dotted',
                                },
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#283352',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: '',
                            type: 'line',
                            smooth: false,
                            showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#2C50EE',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(44,80,238,0.1)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(44,80,238,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value,
                        },
                    ],
                };

                chart.setOption( option );
            },

            btnClick( ) {
                this.$refs.controlDialog.dialogVisible = true;
            },
        },
        mounted() {
            this.chartLoad(
                {
                    names: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
                    value: [233, 233, 200, 180, 199, 233, 210, 180, 233, 233, 70, 180, 199, 233, 90, 180, 233, 233, 40, 60, 89, 233, 210, 180, 100 ],
                }
            );
        }
    }
</script>

<style lang="less" scoped>
    .right-panel {
        width: 100%;
        height: 100%;

        >.panel-item {
            width: 1156px;
            height: 96px;
            background: #FFFFFF;
            border-radius: 4px;
            line-height: 40px;
            box-sizing: border-box;
            padding: 28px 40px;

            .head-sub-title {
                width: 215px;
                display: inline-block;
                vertical-align: middle;
                font-size: 16px;
                color: #0E1526;

                &:before {
                    content: ' ';
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: 8px;
                    width: 4px;
                    height: 16px;
                    background: #2C50EE;
                    border-radius: 3px;
                }
            }

            >.handle-btn {
                display: inline-block;
                float: right;
            }
        }

        >.panel-item-details {
            width: 100%;
            height: 464px;
            background: #FFFFFF;
            border-radius: 4px;
            margin-top: 28px;

            >.details-head {
                width: 100%;
                height: 78px;
                line-height: 77px;
                border-bottom: 1px solid #EEEFF2;
                box-sizing: border-box;
                padding: 0 40px;

                >.details-head-text {
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 16px;
                    color: #535763;
                    margin-right: 13px;
                }

                >img {
                    vertical-align: middle;
                }
            }

            >.details-body {
                width: 100%;
                height: calc( 100% - 78px );
                padding: 23px 40px 40px;
                box-sizing: border-box;

                >.details-info {
                    display: inline-block;
                    vertical-align: top;
                    width: 335px;
                    height: 100%;
                    border-right: 1px solid #EEEFF2;
                    box-sizing: border-box;
                    padding-right: 24px;

                    >.info-head {
                        width: 100%;
                        height: 64px;

                    }

                    .list-head {
                        height: 48px;
                        line-height: 46px;
                        border-top: 1px solid #EEEFF2;
                        border-bottom: 1px solid #EEEFF2;
                        box-sizing: border-box;
                        display: flex;

                        >.list-head-item {
                            flex: 1;
                            color: #535763;
                            font-size: 14px;
                        }
                    }

                    .list-body {
                        width: 100%;
                        height: calc( 100% - 64px - 46px );

                        .list-row {
                            display: flex;
                            height: 32px;
                            line-height: 32px;
                            padding-top: 10px;

                            >.list-td {
                                flex: 1;

                                .el-input {
                                    width: 72px;
                                    height: 32px;

                                    /deep/.el-input__inner {
                                        height: 32px;
                                        line-height: 32px;
                                        background: #F9FAFE;
                                        border-radius: 4px;
                                        border: 1px solid #EEEFF2;
                                    }
                                }

                                &:last-child {
                                    font-size: 14px;
                                    color: #FF3B30;
                                }
                            }
                        }
                    }
                }

                >.chart-box {
                    display: inline-block;
                    vertical-align: top;
                    width: calc( 100% - 335px );
                    height: 100%;
                }
            }
        }
    }
</style>
